<script lang='ts' setup>
const props = withDefaults(defineProps<{
    dataList: any,
}>(), {
    dataList: [], 
})
</script>

<template>
    <main>
        <el-table :data="props.dataList" style="width: 100%" border> 
            <el-table-column label="门店名称" prop="storeName" />
            <el-table-column  sortable > 
                <template #header>
                    <section style="display: inline-flex">
                        <span>服务项目</span>
                        <el-tooltip effect="dark" content="该员工参与的服务项目数量。" 
                            placement="left-start" >
                            <svg t="1702367275758" style="transform: translateY(2px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
                        </el-tooltip> 
                    </section> 
                </template>
                <template #default="scope">
                    <p class="order-number">{{ scope.row.name }}</p>
                </template>
            </el-table-column>

            <el-table-column  sortable > 
                <template #header>
                    <section style="display: inline-flex">
                        <span>手工数</span>
                        <el-tooltip effect="dark" content="该员工参与服务项目所计算的手工数量，如一个项目有2人参与服务，则手工数量为0.5次。" 
                            placement="left-start" >
                            <svg t="1702367275758" style="transform: translateY(2px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
                        </el-tooltip> 
                    </section> 
                </template>
                <template #default="scope">
                    <p class="order-number">{{ scope.row.name }}</p>
                </template>
            </el-table-column>

            <el-table-column sortable label="评价数量"></el-table-column>
            <el-table-column label="评价占比"></el-table-column>
            <el-table-column sortable label="平均分"></el-table-column>
            <el-table-column sortable label="5分"></el-table-column>
            <el-table-column sortable label="4分"></el-table-column>
            <el-table-column sortable label="3分"></el-table-column>
            <el-table-column sortable label="2分"></el-table-column>
            <el-table-column sortable label="1分"></el-table-column> 

            <el-table-column label="操作" prop="cellPrice">
                <template #default="scope">
                    <el-link :underline="false" type="primary">详情</el-link>
                </template>
            </el-table-column>
        </el-table>
    </main>
</template>

<style lang='scss' scoped>

</style>